<template>
	<view class="activityDetailsBox">
		<view class="contentBox">
			<view class="contentBox1">
				<view class="contentBox1Titles">
					<view class="contentBox1Title">
						<view class="wire"></view>
						<view class="title">经销商基本信息</view>
					</view>
					<!-- <image  src="/static/pages/index/modifyImg.png" mode="" class="modifyImg" @click="editClick"></image> -->
					<view>
						<image src="/static/pages/index/center_icon_delete@2x.png" mode="" class="modifyImg" @click="deleteClick"></image>
						<image src="/static/pages/index/center_icon_edit@2x.png" mode="" class="modifyImg" @click="editClick"></image>
					</view>
				</view>
				<view class="titleBox">{{ usetObj.stores }}</view>
				<view class="funds">
					<view class="fundsW1">姓名：</view>
					<view class="fundsW2">{{ usetObj.name }}</view>
				</view>
				<view class="quota">
					<view class="quotaW1">电话：</view>
					<view class="quotaW2">{{ usetObj.mobile }}</view>
				</view>

				<view class="quota">
					<view class="quotaW1">登录密码：</view>
					<view class="quotaW2">{{ usetObj.password }}</view>
				</view>
				<view class="quota">
					<view class="quotaW1">所属地担：</view>
					<view class="quotaW2">{{ address.sheng }}{{ address.shi }}{{ address.qu }}</view>
				</view>
				<view class="quota">
					<view class="quotaW1">所属门店：</view>
					<view class="quotaW2">{{ usetObj.stores }}</view>
				</view>
			</view>
			<view class="zhong"><switch :checked="show" @change="switch1Change" /></view>
		</view>
		<!-- 删除弹窗 -->
		<view class="mask" v-if="deleShow">
			<view class="maskContent1">
				<image class="imgContent" @click="clooseBoxClick" src="/static/pages/index/cloose.png" mode=""></image>
				<view class="titleBoxs">确定删除该经销商吗？</view>
				<view class="maskBtn">
					<view class="maskBtn1" @click="clooseBoxClick">取消</view>
					<view class="maskBtn2" @click="determineClick">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { regionDistributorDetails, regionChangeStatus, regionDelete } from '@/request/api.js';
export default {
	data() {
		return {
			maskShow: false,
			feedbackShowa: false,
			feedbackShowc: false,
			feedbackisShow: '', //反馈1样式控制
			noShow: false, //反馈1"否"弹窗
			id: '',
			usetObj: {},
			address: {},
			show: false,
			deleShow: false
		};
	},
	onLoad(option) {
		console.log(option);
		this.id = option.id;
		
	},
	onShow() {
		
		if (this.id) {
			this.init();
			this.address = uni.getStorageSync('regionMessage');
			
		}
	},
	methods: {
		//经销商详情
		init() {
			let _this = this;
			let data = {
				id: _this.id
			};
			regionDistributorDetails(data)
				.then(res => {
					if (res.code == 1) {
						_this.usetObj = res.data;
						if (_this.usetObj.status == 1) {
							_this.show = true;
						} else {
							_this.show = false;
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		//改变活动状态
		switch1Change: function(e) {
			console.log('switch1 发生 change 事件，携带值为', e.target.value);
			let _this = this;
			let status;
			if (e.target.value) {
				status = 1;
			} else {
				status = 2;
			}
			let data = {
				id: _this.usetObj.id,
				regional_id: _this.address.id,
				status: status
			};
			regionChangeStatus(data)
				.then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: e.target.value ? '启用成功' : '禁止成功',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		editClick() {
			uni.navigateTo({
				url: `edit_jingxiao?id=${this.id}`
			});
		},
		//删除经销商
		deleteClick() {
			this.deleShow = true;
		},
		//关闭弹窗
		clooseBoxClick() {
			this.deleShow = false;
		},
		//确定
		determineClick() {
			let _this = this;
			let data = {
				id: _this.id,
				regional_id: _this.address.id
			};
			regionDelete(data)
				.then(res => {
					if (res.code == 1) {
						uni.navigateBack({
							delta:1
						})
						_this.deleShow=false
						setTimeout(() => {
							uni.showToast({
						 	title: res.msg,
						    icon: 'none'
						 });
						},1000);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
				.catch(err => {
					// console.log(err)
				});
		}
	}
};
</script>

<style lang="scss">
.zhong {
	display: flex;
	justify-content: center;
	margin-top: 30rpx;
}
page {
	background-color: #ffffff;
}

.activityDetailsBox {
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 40rpx;
	overflow: hidden;
	position: relative;

	.contentBox {
		width: 670rpx;
		margin: 30rpx auto 0;

		.contentBox1 {
			.contentBox1Titles {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #f2f2f4;
				display: flex;
				justify-content: space-between;
				.contentBox1Title {
					display: flex;
					.wire {
						width: 4rpx;
						height: 36rpx;
						background: #2e2f33;
						border-radius: 2rpx;
						margin: 32rpx 0 0 24rpx;
					}

					.title {
						// line-height: 100rpx;
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2e2f33;
						margin: 25rpx 0 0 14rpx;
					}
				}
				.modifyImg {
					width: 34rpx;
					height: 34rpx;
					margin: 33rpx 24rpx 0 0;
				}
			}
			.titleBox {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2e2f33;
				margin: 30rpx 0 9rpx 26rpx;
			}

			.funds {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f2f2f4;

				.fundsW1 {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					line-height: 100rpx;
					margin-left: 25rpx;
				}

				.fundsW2 {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					line-height: 100rpx;
					margin-right: 25rpx;
				}
			}

			.quota {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f2f2f4;

				.quotaW1 {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					line-height: 100rpx;
					margin-left: 25rpx;
				}

				.quotaW2 {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					line-height: 100rpx;
					margin-right: 25rpx;
				}
			}
		}

		.contentBox2 {
			.contentBox1Title {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #f2f2f4;
				display: flex;

				.wire {
					width: 4rpx;
					height: 36rpx;
					background: #2e2f33;
					border-radius: 2rpx;
					margin: 32rpx 0 0 24rpx;
				}

				.title {
					// line-height: 100rpx;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					margin: 25rpx 0 0 14rpx;
				}
			}

			.titleBox {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2e2f33;
				margin: 30rpx 0 9rpx 26rpx;
			}
		}

		.contentBox3 {
			.contentBox1Title {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #f2f2f4;
				display: flex;

				.wire {
					width: 4rpx;
					height: 36rpx;
					background: #2e2f33;
					border-radius: 2rpx;
					margin: 32rpx 0 0 24rpx;
				}

				.title {
					// line-height: 100rpx;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					margin: 25rpx 0 0 14rpx;
				}
			}

			.contentWord {
				width: 620rpx;
				margin: 26rpx auto 0;
				word-break: normal|break-all|keep-all;
				word-wrap: break-word;
			}
		}
		.contentBox3a {
			.contentBox1Title {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #f2f2f4;
				display: flex;

				.wire {
					width: 4rpx;
					height: 36rpx;
					background: #2e2f33;
					border-radius: 2rpx;
					margin: 32rpx 0 0 24rpx;
				}

				.title {
					// line-height: 100rpx;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					margin: 25rpx 0 0 14rpx;
				}
			}
			.xTitle {
				display: flex;
				margin-top: 40rpx;
				justify-content: space-between;
				.xTitleW {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					margin-left: 26rpx;
				}
				.xTitleC {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					margin-right: 35rpx;
				}
			}
			.contentWord {
				width: 620rpx;
				margin: 26rpx auto 0;
				word-break: normal|break-all|keep-all;
				word-wrap: break-word;
			}
		}

		.contentBox4 {
			.contentBox1Title {
				width: 100%;
				height: 100rpx;
				border-bottom: 1px solid #f2f2f4;
				display: flex;

				.wire {
					width: 4rpx;
					height: 36rpx;
					background: #2e2f33;
					border-radius: 2rpx;
					margin: 32rpx 0 0 24rpx;
				}

				.title {
					// line-height: 100rpx;
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2e2f33;
					margin: 25rpx 0 0 14rpx;
				}
			}

			.stage1 {
				width: 100%;
				display: flex;
				margin-top: 40rpx;

				.stage1Box {
					width: 40rpx;
					height: 40rpx;
					background: #1855f6;
					border-radius: 50%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 40rpx;
					text-align: center;
					margin-left: 24rpx;
				}

				.stage1BoxWord {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #2e2f33;
					margin-left: 26rpx;
					margin-top: -4rpx;
				}
			}

			.stage1Contnet {
				width: 100%;
				height: 140rpx;
				display: flex;
				margin-top: 20rpx;

				.stage1ContnetWire {
					width: 2rpx;
					height: 140rpx;
					background: #1855f6;
					margin-left: 43rpx;
				}

				.stage1ContnetWord {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 140rpx;
					margin-left: 44rpx;
				}
			}

			.stage1Contnet1 {
				width: 100%;
				height: 140rpx;
				display: flex;
				margin-top: 20rpx;

				.stage1ContnetWord {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 140rpx;
					margin-left: 89rpx;
				}
			}
		}
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);

		.maskContent1 {
			width: 580rpx;
			height: 340rpx;
			background: #ffffff;
			border-radius: 24rpx;
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%);
			overflow: hidden;
			.imgContent {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 40rpx;
				right: 24rpx;
			}
			.titleBoxs {
				font-size: 28rpx;
				text-align: center;
				margin-top: 130rpx;
			}
			.maskBtn {
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin-top: 60rpx;
				.maskBtn1 {
					width: 200rpx;
					height: 70rpx;
					background: #d8def0;
					border-radius: 35rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1855f6;
					line-height: 70rpx;
					text-align: center;
				}
				.maskBtn2 {
					width: 200rpx;
					height: 70rpx;
					background: #1855f6;
					border-radius: 35rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					line-height: 70rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>
